<template>
    <MessageBox>
        <div class="messageModel">
            <div class="text">
                <div class="title">{{ title }}</div>
                <div v-if="props.info.type === 3" class="content link-content">{{ props.info.desc }}</div>
                <div v-else class="content">
                    {{ props.info.content }}
                </div>
            </div>
            <div class="icon">
                <el-image :src="formatUrl(props.info)" alt="" fit="cover">
                    <template #error>
                        <el-image :src="getDefaultUrl(props.info)" alt=""></el-image>
                    </template>
                </el-image>
            </div>
        </div>
    </MessageBox>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import MessageBox from './MessageBox.vue';
import { getHashTabs } from '../../../../materialContent/utils';

const props = defineProps(['info']);

const formatUrl = (info: any) => {
    switch (info.type) {
        case 5:
            const fileType = info.fileInfo.name.split('.').pop()
            const fileTypeIcon = {
                xls: 'xls',
                xlsx: 'xls',
                doc: 'text',
                docx: 'text',
                ppt: 'ppt',
                pptx: 'ppt',
            }[fileType]
            if (fileTypeIcon) {
                return `/file/${fileTypeIcon}.png`;
            }
        case 3:
            return info.thumbUrl
        default:
            return info.icon;
    }
};

const getDefaultUrl = (info: any) => {
    const maps = getHashTabs();
    return maps[info.type].icon;
};

const title = computed(() => {
    if (props.info.type === 3) {
        return props.info.title
    }
    return props.info.fileInfo.name
})
</script>

<style lang="scss" scoped>
.messageModel {
    display: flex;

    .text {
        flex: 1;
        font-size: 13px;
        color: #666;
        line-height: 18px;
        margin-right: 6px;
        font-weight: 400;

        .title {
            font-size: 15px;
            color: #000;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }

        .content {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            margin-top: 5px;
        }
        .link-content {
            -webkit-line-clamp: 3;
        }
    }

    .icon {
        width: 48px;
        height: 48px;
        position: relative;
        margin-top: 25px;

        .el-image {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }
}
</style>
